<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
	</head>

	<body>
		<div id="test"></div>

		<!-- 引入react核心库 -->
		<script src="js/react.development.js" type="text/javascript" charset="utf-8"></script>
		<!-- 引入react-dom 用于支持react操作dom -->
		<script src="js/react-dom.development.js" type="text/javascript" charset="utf-8"></script>
		<!-- 引入babel，用于将jsx转化成js。浏览器只识别js，不识别jsx -->
		<script src="js/17.0.1/babel.min.js" type="text/javascript" charset="utf-8"></script>

		<!-- 此处一定要写babel -->
		<script type="text/babel">
			// 1 创建类式组件
		class Count extends React.Component {//myComponent继承了React.Component类
			// 构造器
			constructor(props){
				console.log('count constructor')
				super(props)
				// 初始化状态
				this.state = {count:0}
				
			}
			// 加1按钮的回调
			add=()=>{
				// 获取原状态
				const {count} = this.state
				// 更新状态
				this.setState({count:count+1})
			}
			remove=()=>{
				// 卸载组件
				ReactDOM.unmountComponentAtNode(document.getElementById('test'))
			}
			force=()=>{
				// 强制更新按钮的回调
				this.forceUpdate()//不受阀门的控制，依然会执行componentWillUpdate
			}
			// 组件将要挂载的钩子
			componentWillMount(){
				console.log('count componentWillMount')
			}
			//组件挂载完毕的钩子
			componentDidMount(){
				console.log('count componentDidMount')
			}
			// 组件将要被卸载
			componentWillUnmount(){
				console.log('count componentWillUnmount')
			}
			// 控制组件更新的"阀门" 必须返回值
			shouldComponentUpdate(){
				console.log('count shouldComponentUpdate')
				return false
			}
			// 组件将要更新的钩子
			componentWillUpdate(){
				console.log('count componentWillUpdate')
			}
			// 组件更新完毕的钩子
			componentDidUpdate(){
				console.log('count componentDidUpdate')
			}
			
			render() {
				console.log('count render')
				const {count} = this.state
				return (
					<div>
						<h2>当前求和为:{count}</h2>
						<button onClick={this.add}>提交</button>
						<button onClick={this.remove}>卸载</button>
						<button onClick={this.force}>强制更新</button>
					</div>
				)
			}
		}

		// 渲染虚拟DOM到页面
		ReactDOM.render(<Count />, document.getElementById('test'))
	</script>

	</body>

</html>
